<template>
  <div>
    <br>
    <!--    搜索栏-->
    <div >
      <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
        <el-form-item label="查询条件">
          <el-input v-model="queryCondition.driverName" placeholder="司机姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryCondition.carNo" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-search" @click="queryAccident" :loading="btnLoading">搜索</el-button>
          <el-button type="warning" plain icon="el-icon-refresh" @click="refreshBtn">重置搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
        <el-button type="primary" plain icon="el-icon-plus" @click="addAccident">增加</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="deleteAccidentByIds">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <br>

    <!--     内容主体-->
    <div style="text-align: center">
      <!--  表格-->
      <el-table
        refs="contextTable"
        :data="accidentList"
        @selection-change="setIds"
        border
        style="text-align: center;width: 100%">
        <el-table-column
          value="id"
          prop="id"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="acc_date"
          label="日期"
        >
        </el-table-column>
        <el-table-column
          prop="car_no"
          label="车牌号"
        >
        </el-table-column>
        <el-table-column
          prop="acc_explain"
          label="发生事故"
        >
        </el-table-column>
        <el-table-column
          prop="acc_place"
          label="事故地点"
        >
        </el-table-column>
        <el-table-column
          prop="we_situation"
          label="我方损失"
        >
        </el-table-column>
        <el-table-column
          prop="other_situation"
          label="对方损失"
        >
        </el-table-column>
        <el-table-column
          prop="we_amount"
          label="我方维修费用"
        >
        </el-table-column>
        <el-table-column
          prop="other_amount"
          label="对方维修费用"
        >
        </el-table-column>
        <el-table-column
          prop="ins_amount"
          label="保险赔付"
        >
        </el-table-column>
        <el-table-column
          prop="result"
          label="责任归属"
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="事故状态"
        >
        </el-table-column>
        <el-table-column
          width="250"
          prop="id"
          label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" plain icon="el-icon-edit-outline" @click="editById(scope.row.id)">修改</el-button>
              <el-button type="danger"  plain icon="el-icon-delete" @click="deleteAccidentById(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!--  分页-->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="nowPage"
          :page-sizes="[5,7,10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import accidentApi from "@/api/accident";
export default {
  name: "accident_record",
  data(){
    return{
      // 分页条件查询的参数
      nowPage:1,
      pageSize:7,
      queryCondition:{},
      accidentList:null,
      total:0,
      // 删除的ID数组
      ids:[],
      // 加载图标切换
      btnLoading:false,
    }
  },
  created() {
    this.queryAccident()
  },
  methods:{
    refreshBtn(){
      this.queryCondition={}
    },
    // 条件分页查询
    queryAccident(){
      this.btnLoading=true
      accidentApi
        .queryAccident(this.nowPage,this.pageSize,this.queryCondition)
        .then((response)=>{
          this.accidentList=response.data.items
          this.total=response.data.total
          this.btnLoading=false
        })
    },
    // 获取选中的复选框的ID
    setIds (record) {
      // console.log(record)
      this.ids=[]
      for (let i = 0; i < record.length; i++) {
        this.ids.push(record[i].id)
      }
      console.log(this.ids)
    },
    // 每行的单个删除按钮
    deleteAccidentById(id){
      console.log(this.$refs.multipleTable)

      console.log(id)
      if (id!=null){
        //这里清空后，应该把复选框的选中状态重置，但是这里重置事件无效！
        // this.$refs.multipleTable.clearSelection();
        this.ids=[]
        this.ids.push(id)
        this.deleteAccidentByIds()
      }
    },
    //批量删除(通过内置事件获取选中列，自带参数为一个MouseEvent{}对象，所以不能和单个删除混用判断是否为空来赋值)
    deleteAccidentByIds(id){
      // console.log(id)
      //这个写法复选框那里会报错
      // if (id!=null){
      //   this.ids=[]
      //   this.ids.push(id)
      // }
      if (this.ids.length==0){
        this.$message({
          type: 'warning',
          message: '没有选中任何行!'
        });
      }else {
        this.$confirm(`此操作将永久删除id为${this.ids}的数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          accidentApi
            .deleteAccidentByIds(this.ids)
            .then((response)=>{
              if ( response.success==true){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.queryAccident()
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    //增加
    addAccident(){
      this.$router.push({path:`/daily_work/accident_record_add`})
    },
    //修改
    editById(id){
      console.log('这是参数id'+id)
      this.$router.push({path:`/daily_work/accident_record_edit/${id}`})
      // accidentRecord
    },
    // 分页的
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize= val
      accidentApi
        .queryAccident(this.nowPage,this.pageSize,this.queryCondition)
        .then((response)=>{
          this.accidentList=response.data.items
          this.total=response.data.total
        })
    },
    handleCurrentChange(val) {
      this.nowPage=val
      console.log("当前页："+val)
      accidentApi
        .queryAccident(this.nowPage,this.pageSize,this.queryCondition)
        .then((response)=>{
          this.accidentList=response.data.items
          this.total=response.data.total
        })
    },

  },
}
</script>

<style scoped>

</style>
